<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <!-- 数据列表 -->
    <div class="flex mt10">
      <el-card shadow="never" :body-style="{ padding: '10px 20px 10px' }" style="margin-right: 20px; flex: 1">
        <div slot="header" class="mb9 f16 flex btns">
          <span style="font-weight: 600">库存资料</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="100" :outTableHeight="75" stripe @currentRow="CurrentRow" />

        <!-- 分页器 -->
        <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '0' }">
        <el-card shadow="never" :body-style="{ padding: '10px 20px 0px' }">
          <div slot="header" class="mb9 f16 flex">
            <span style="font-weight: 600">入库单据明细</span>
          </div>
          <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="50" :outTableHeight="75" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '10px 20px 10px' }">
          <div slot="header" class="mb9 f16 flex">
            <span style="font-weight: 600">出库单据明细</span>
          </div>
          <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="50" :outTableHeight="75" />
        </el-card>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch, type Ref } from 'vue'

import Api from '@/api/GeneralManager/inquire/materials'
import type { formListType } from '@/components/Find/index.vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'MaterialInventoryInquiryKlT'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const tableData = ref([])
const mtlName = ref('') as string & Ref
const mtlColor = ref('') as string & Ref
const mtlUnit = ref('') as string & Ref
const startDate = ref('') as string & Ref
const endDate = ref('') as string & Ref
const getTableList = async () => {
  try {
    let TableList = await Api.getTableList({
      inStockEndTime: endDate.value, //入库结束日期
      inStockStartTime: startDate.value, //入库开始日期
      mtlColor: mtlColor.value, //颜色
      mtlName: mtlName.value, //材质
      mtlUnit: mtlUnit.value, //规格
      pageNum: currentPage.value, //	integer
      pageSize: pageSize.value, //	integer
      stock: 0, //0：全部 1：库存大于0	integer
      style: '' //大类
    })
    // console.log(TableList);

    tableData.value = TableList.list
    total.value = TableList.total
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  getTableList()
})
const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '大类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材质',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入规格',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '出入库日期',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '库存>0',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '公用',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '非公用',
    checked: true
  },
  {
    type: 'button',
    checkboxLabel: '清空'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

// 表格数据
const tableHeader = ref([
  {
    label: '料号',
    prop: 'mtlNo'
  },
  {
    label: '材质',
    prop: 'mtlName',
    width: '250'
  },
  {
    label: '颜色',
    prop: 'mtlColor'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '库存数量',
    prop: 'stkQty'
  }
])
const tableHeader2 = ref([
  {
    label: '单据号',
    prop: 'slipNo',
    width: '150'
  },
  {
    label: '单据日期',
    prop: 'slipDate'
  },
  {
    label: '单据类型',
    prop: 'slipType'
  },
  {
    label: '入库数量',
    prop: 'inQty'
  },
  {
    label: '库存位置',
    prop: 'areaNo'
  },
  {
    label: '采购员',
    prop: 'cfmUser'
  }
])
const tableData2 = ref([])
const tableHeader3 = ref([
  {
    label: '单据号',
    prop: 'slipNo',
    width: '150'
  },
  {
    label: '单据日期',
    prop: 'slipDate'
  },
  {
    label: '单据类型',
    prop: 'slipType'
  },
  {
    label: '入库数量',
    prop: 'inQty'
  },
  {
    label: '库存位置',
    prop: 'areaNo'
  },
  {
    label: '采购员',
    prop: 'cfmUser'
  }
])
const tableData3 = ref([])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}

const CurrentRow = async (row: any) => {
  // console.log(row);
  let { mtlNo } = row
  try {
    let { inStockMsg, outStockMsg } = await Api.getStockDetail(mtlNo)
    tableData2.value = inStockMsg.list
    tableData3.value = outStockMsg.list
  } catch (error) {
    console.log(error)
  }
}

// 监听查询
watch(formList.value, (newVal: any) => {
  // console.log(newVal);
  newVal.forEach((item: any) => {
    if (item.type === 'input' && item.inputPlaceholder === '请输入材质') {
      mtlName.value = item.inputValue
      getTableList()
      return
    }
    if (item.type === 'input' && item.inputPlaceholder === '请输入颜色') {
      mtlColor.value = item.inputValue
      getTableList()
      return
    }
    if (item.type === 'input' && item.inputPlaceholder === '请输入规格') {
      mtlUnit.value = item.inputValue
      getTableList()
      return
    }
    if (item.type === 'date') {
      startDate.value = (item.dateValue && item.dateValue[0]) || startDate.value
      endDate.value = (item.dateValue && item.dateValue[1]) || startDate.value
      getTableList()
      return
    }
  })
})
// 清空
const findClicked = (content: string) => {
  formList.value.forEach((item) => {
    item.inputValue = ''
    item.selectValue = ''
    item.dateValue = ''
    item.dateValue = ''
    item.checked = true
  })
  getTableList()
}
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: space-between;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}

// 底部
.bottom {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  margin-top: 40px;

  .total {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
    margin-right: 100px;
  }

  :deep(.el-input__wrapper) {
    padding: 0;
  }

  :deep(.el-input__suffix) {
    transform: translateX(-9px);
  }

  :deep(.el-pagination .el-select .el-input) {
    width: 88px;
  }

  :deep(.number) {
    border: 1px solid #dcdcdc;
    margin-right: 8px;
    border-radius: 3px 3px 3px 3px;
  }

  :deep(.is-active.number) {
    background-color: #f89027 !important;
    color: white;
    border-radius: 3px 3px 3px 3px;
  }

  .save {
    color: black;
    border: 1px solid #e7e7e7;
    background: #e7e7e7;
  }
}
</style>
